<template>
  <Card>
    <p slot="title">今日警情分析</p>
    <div class="chart" id="chart-alarms-today"></div>
    <Divider />
    <span class="text">今日接警{{count}}次</span>
    <Spin v-if="loading" fix size="large"></Spin>
  </Card>
</template>

<script>
import axios from "axios";
export default {
  name: "",
  data() {
    return {
      option: null,
      count: 0,
      chart: null,
      loading: false
    };
  },
  mounted() {
      this.renderChart();
  },
  methods: {
    renderChart() {
      this.loading = true;
      this.option = {
        tooltip: { show: true, trigger: "item", formatter: "{b}:{c}" },
        legend: {
          itemWidth: 12,
          itemHeight: 12,
          orient: "horizontal",
          top: "top",
          left: "center",
          data: [], 
          textStyle: { fontSize: 12 }
        },
        color: this.COLORS,
        series: [
          {
            name: "今日各区出警情况",
            type: "pie",
            radius: "55%",
            center: ["50%", "60%"],
            data: [],
            itemStyle: {
              normal: {
                shadowOffsetX: 3,
                shadowOffsetY: 3,
                shadowBlur: 7,
                shadowColor: "#00000033"
              }
            },
            label: {
              normal: {
                show: true,
                position: "outside",
                fontSize: 12,
                formatter: "{b}\n{c}起"
              }
            }
          }
        ]
      };
      var params = {
          startTime:this.dateShift(0)+' 00:00:00',
          endTime:this.dateShift(0)+' 23:59:59'
      }
      axios.get(this.URLHEAD_DVS + 'YZT_ZQXYFX',{
          params:params
      }).then(res=>{
          let json = res.data;
          this.option.legend.data = json.Data.map(o=>{
              return o.AreaName
          })
          this.option.series[0].data = json.Data.map(o=>{
              return {
                  name:o.AreaName,
                  value:o.List.hzjy_list + o.List.qtcd_list+o.List.qxpj_list+o.List.shjz_list
              }
          })
          json.Data.forEach((o,i)=>{
              this.count = o.List.hzjy_list + o.List.qtcd_list+o.List.qxpj_list+o.List.shjz_list + this.count;
          })
          this.$Crender('chart-alarms-today',this.option)
          this.loading=false;
      })
    }
  }
};
</script>

<style scoped>
.chart{
  height:500px;
}
</style>